@use "utils/variables";

.emoji-picker {
    pointer-events: auto;

    li.custom-emoji-tab:not(.active) {
        a {
            width: max-content;
            padding-top: 7px !important;

            svg,
            div {
                color: rgba(var(--center-channel-color-rgb), 0.64);
                fill: rgba(var(--center-channel-color-rgb), 0.64);
            }

            &:hover {
                svg,
                div {
                    color: rgba(var(--center-channel-color-rgb), 0.8);
                    fill: rgba(var(--center-channel-color-rgb), 0.8);
                }
            }
        }
    }

    li.custom-emoji-tab.active {
        a {
            width: max-content;
            padding-top: 7px !important;

            svg,
            div {
                color: var(--button-bg);
                fill: var(--mention-bg-rgb);
            }

            &:hover {
                svg,
                div {
                    color: var(--button-bg);
                    fill: var(--mention-bg-rgb);
                }
            }
        }
    }

    .nav.nav-tabs {
        width: fit-content;
        width: -moz-fit-content;
    }
}

.emoji-picker-overlay {
    z-index: variables.$z-index-popover;
    pointer-events: none;
}

.custom-emoji-tab__icon__text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.custom-emoji-tab {
    display: flex;
}

.custom-emoji-tab__icon {
    margin-right: 7px;
}

#emoji-picker-tabs {
    display: flex;

    // These prevent a flex element from overflowing its parent
    min-width: 0;
    min-height: 0;

    flex: 1;
    flex-direction: column;

    .tab-content {
        display: flex;

        // These prevent a flex element from overflowing its parent
        min-width: 0;
        min-height: 0;

        flex: 1;

        .tab-pane {
            display: flex;

            // These prevent a flex element from overflowing its parent
            min-width: 0;
            min-height: 0;

            flex: 1;
            flex-direction: column;
        }
    }
}
